<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset='utf-8'>
  <link href="../css/zui.min.css" rel="stylesheet">
  <link href="../css/example.css" rel="stylesheet">

  <link rel="stylesheet/less" type="text/css" href="../src/less/zui.less" />
  <script type="text/javascript"> less = { env: "development", dumpLineNumbers:'mediaquery' }; </script>
  <script src="../assets/js/less.js"></script>
  <script src="../../assets/jquery.js"></script>
  <script src="../../dist/js/zui.min.js"></script>







  <link href="../css/example.css" rel="stylesheet">


  <script src="../assets/js/example.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ZUI</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span id="navbarCurrent">examples</span> <b class="caret"></b></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="alerts.html">alerts</a></li>
            <li><a href="article.html">article</a></li>
            <li><a href="breadcrumb.html">breadcrumb</a></li>
            <li><a href="button-groups.html">button-groups</a></li>
            <li><a href="buttons.html">buttons</a></li>
            <li><a href="cards.html">cards</a></li>
            <li><a href="carousel.html">carousel</a></li>
            <li><a href="chosen.html">chosen</a></li>
            <li><a href="collapse.html">collapse</a></li>
            <li><a href="colorset.html">colorset</a></li>
            <li><a href="comment.html">comment</a></li>
            <li><a href="dropdowns.html">dropdowns</a></li>
            <li><a href="forms.html">forms</a></li>
            <li><a href="grid.html">grid</a></li>
            <li><a href="icons.html">icons</a></li>
            <li><a href="input-groups.html">input-groups</a></li>
            <li><a href="kindeditor.html">kindeditor</a></li>
            <li><a href="labels.html">labels</a></li>
            <li><a href="lightbox.html">Lightbox</a></li>
            <li><a href="list-group.html">list-group</a></li>
            <li><a href="list.html">list</a></li>
            <li><a href="modals.html">modals</a></li>
            <li><a href="navbars.html">navbars</a></li>
            <li><a href="navs.html">navs</a></li>
            <li><a href="pager.html">pager</a></li>
            <li><a href="panels.html">panels</a></li>
            <li><a href="popovers.html">popovers</a></li>
            <li><a href="progress.html">progress</a></li>
            <li><a href="tables.html">tables</a></li>
            <li><a href="tabs.html">tabs</a></li>
            <li><a href="textbox.html">textbox</a></li>
            <li><a href="tooltip.html">tooltip</a></li>
            <li><a href="type.html">type</a></li>
          </ul>
        </li>
        <li id="navbarNext"><a href="###">NEXT <i class="icon-angle-right icon-large"></i></a></li>
      </ul>
    </div>
  </nav>
<article>
  <section id='tabs' class="page-section">
    <h1>标签页</h1>
    <p>一般结合导航使用。</p>

    <h3>类型</h3>
    <h4>基本类型</h4>
    <p>通过<code>ul.nav + div.tab-content</code>的方式实现。</p>
    <ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
      <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other tabs<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li><a href="#tab3" tabindex="-1" data-toggle="tab">Tab3</a></li>
          <li><a href="#tab4" tabindex="-1" data-toggle="tab">Tab4</a></li>
        </ul>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane in active" id="tab1">
        <p>口是心非你深情的承诺</p>
        <p>都随着西风飘渺远走</p>
        <p>痴人梦话我钟情的倚托</p>
        <p>就像枯萎凋零的花朵</p>
      </div>
      <div class="tab-pane" id="tab2">
        <p> 星火燎原我热情的眼眸</p>
        <p> 曾点亮最灿烂的天空</p>
        <p> 晴天霹雳你绝情的放手</p>
        <p> 在我最需要你的时候</p>
        <p> 于是爱恨交错人消瘦</p>
      </div>

      <div class="tab-pane" id="tab3">
        <p>怕是怕这些苦没来由</p>
        <p>于是悲欢起落人静默</p>
        <p>等一等这些伤会自由</p>
        <p>于是爱恨交错人消瘦</p>
        <p>怕是怕这些苦没来由</p>
        <p>于是悲欢起落人静默</p>
        <p>等一等这些伤会自由</p>
      </div>
      <div class="tab-pane" id="tab4">
        <p> 口是心非你矫情的面容</p>
        <p> 都烙印在心灵的角落</p>
        <p> 无话可说我纵情的结果</p>
        <p> 就像残破光秃的山头</p>
        <p> 浑然天成我纯情的悸动</p>
        <p> 曾奔放最滚烫的节奏</p>
        <p>不可收拾你滥情的抛空</p>
      </div>
    </div>

    <h3>变化</h3>
    <h4>导航样式</h4>
    <p><code>ul.nav.nav-pills</code>，通过修改ul的.nav-*来修改导航样式，具体见导航控件。</p>
    <ul id="myTab2" class="nav nav-pills">
      <li class="active"><a href="#tab11" data-toggle="tab">Tab1</a></li>
      <li><a href="#tab22" data-toggle="tab">Tab2</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other tabs<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li><a href="#tab33" tabindex="-1" data-toggle="tab">Tab3</a></li>
          <li><a href="#tab44" tabindex="-1" data-toggle="tab">Tab4</a></li>
        </ul>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane in active" id="tab11">
        <p>口是心非你深情的承诺</p>
        <p>都随着西风飘渺远走</p>
        <p>痴人梦话我钟情的倚托</p>
        <p>就像枯萎凋零的花朵</p>
      </div>
      <div class="tab-pane" id="tab22">
        <p> 星火燎原我热情的眼眸</p>
        <p> 曾点亮最灿烂的天空</p>
        <p> 晴天霹雳你绝情的放手</p>
        <p> 在我最需要你的时候</p>
        <p> 于是爱恨交错人消瘦</p>
      </div>

      <div class="tab-pane" id="tab33">
        <p>怕是怕这些苦没来由</p>
        <p>于是悲欢起落人静默</p>
        <p>等一等这些伤会自由</p>
        <p>于是爱恨交错人消瘦</p>
        <p>怕是怕这些苦没来由</p>
        <p>于是悲欢起落人静默</p>
        <p>等一等这些伤会自由</p>
      </div>
      <div class="tab-pane" id="tab44">
        <p> 口是心非你矫情的面容</p>
        <p> 都烙印在心灵的角落</p>
        <p> 无话可说我纵情的结果</p>
        <p> 就像残破光秃的山头</p>
        <p> 浑然天成我纯情的悸动</p>
        <p> 曾奔放最滚烫的节奏</p>
        <p>不可收拾你滥情的抛空</p>
      </div>
    </div>

    <h4>载入效果</h4>
    <p>为每个.tab-pane添加.fade可以让标签页具有淡入的特效。同时第一个标签页所对应的的内容区必须也添加.in</p>
    <ul id="myTab3" class="nav nav-pills">
      <li class="active"><a href="#tab111" data-toggle="tab">fade in</a></li>
      <li><a href="#tab222" data-toggle="tab">in</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other tabs<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li><a href="#tab333" tabindex="-1" data-toggle="tab">fade</a></li>
          <li><a href="#tab444" tabindex="-1" data-toggle="tab">fade</a></li>
        </ul>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="tab111">
        <p>口是心非你深情的承诺</p>
        <p>都随着西风飘渺远走</p>
        <p>痴人梦话我钟情的倚托</p>
        <p>就像枯萎凋零的花朵</p>
      </div>
      <div class="tab-pane fade" id="tab222">
        <p> 星火燎原我热情的眼眸</p>
        <p> 曾点亮最灿烂的天空</p>
        <p> 晴天霹雳你绝情的放手</p>
        <p> 在我最需要你的时候</p>
        <p> 于是爱恨交错人消瘦</p>
      </div>

      <div class="tab-pane fade" id="tab333">
        <p>怕是怕这些苦没来由</p>
        <p>于是悲欢起落人静默</p>
        <p>等一等这些伤会自由</p>
        <p>于是爱恨交错人消瘦</p>
        <p>怕是怕这些苦没来由</p>
        <p>于是悲欢起落人静默</p>
        <p>等一等这些伤会自由</p>
      </div>
      <div class="tab-pane fade" id="tab444">
        <p> 口是心非你矫情的面容</p>
        <p> 都烙印在心灵的角落</p>
        <p> 无话可说我纵情的结果</p>
        <p> 就像残破光秃的山头</p>
        <p> 浑然天成我纯情的悸动</p>
        <p> 曾奔放最滚烫的节奏</p>
        <p>不可收拾你滥情的抛空</p>
      </div>
    </div>

    <h3>方法和事件</h3>
    <table class="table table-bordered table-striped">
      <tr>
        <td>方法</td>
        <td>例子</td>
        <td>描述</td>
      </tr>
      <tr>
        <td><code>.tab('show')</code></td>
        <td><code>$("#myTab a:last").tab('show')</code></td>
        <td>激活标签页和内容区</td>
      </tr>
    </table>
    <table class="table table-bordered table-striped">
      <tr>
        <td>事件</td>
        <td>使用</td>
        <td>描述</td>
      </tr>
      <tr>
        <td>show.bs.tab</td>
        <td>
          $('a[data-toggle="tab"]').on('show.bs.tab', function (e)
          {
            e.target // activated tab
            e.relatedTarget // previous tab
          })
        </td>
        <td>当要激活标签页和标签内容的时候激活该事件</td>
      </tr>
      <tr>
        <td>shown.bs.tab</td>
        <td>
          $('a[data-toggle="tab"]').on('shown.bs.tab', function (e)
          {
            e.target // activated tab
            e.relatedTarget // previous tab
          })
        </td>
        <td>当标签页和标签内容载入完毕后，激活该事件</td>
      </tr>
    </table>

    <p> 关于<code>e.target</code>和<code>e.relatedTarget</code>分别表示当前激活标签对象和前一个标签对象。 </p>
    <p>可遍历对象查看对象各个属性和值：</p>
    <p>
      $('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e)
      {
          $.each(e.target, function(n, value)
          {
              if(value) alert(n + ': ' + value);
          })
      })
    </p>
  </section>
</article>
</body>
</html>
